"use client"

import type { Variants } from "framer-motion"
import { motion } from "framer-motion"
import { ny } from "~/lib/utils"

interface WordFadeInProps {
   words: string
   className?: string
   delay?: number
   variants?: Variants
}

export default function WordFadeIn({
   words,
   delay = 0.15,
   variants = {
      hidden: { opacity: 0 },
      visible: (i: any) => ({
         y: 0,
         opacity: 1,
         transition: { delay: i * delay },
      }),
   },
   className,
}: WordFadeInProps) {
   const _words = words.split(" ")

   return (
      <motion.h1
         variants={variants}
         initial="hidden"
         animate="visible"
         className={ny(
            "font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-7xl md:leading-[5rem] dark:text-white",
            className,
         )}
      >
         {_words.map((word, i) => (
            <motion.span key={word} variants={variants} custom={i}>
               {word}{" "}
            </motion.span>
         ))}
      </motion.h1>
   )
}
